<template>
	<div class="tab-bar-ietm" @click="itemClick">
		<div v-if='!isActive'><slot name="item-icon"></slot></div>
		<div v-else><slot name="item-icon-active"></slot></div>
		<div :style="activeStyle"><slot name="item-text"></slot></div>
	</div>
</template>

<script>
	export default{
		props:{
			path: String,
			activeColor:{
				type:String,
				default:'red'
			}
		},
		computed:{
			isActive(){
				return this.$route.path.indexOf(this.path) !== -1
			},
			activeStyle(){
				return this.isActive ? {color: this.activeColor} : {}
			}
		},

		methods:{
			itemClick(){
				this.$router.push(this.path)
			}
		}
	}
</script>
	
<style>
	.tab-bar-ietm{
		flex: 1;
		text-align: center;/*在item内 居中 */
		height: 49px;

	}
	.tab-bar-ietm img{
		 width: 24px;
		 height: 24px;
		 vertical-align: middle;/* 去掉图片下的空白 */
	 }
</style>
